<extend name="Layout/index" />
<block name="link">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/component/page.css">
	<style>
		.current{
			background:#ccc;
		}
		table td,tr{
			vertical-align: middle;
		}
		.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}
	.skuTable tr,.skuTable td{
		font-size:12px;
	}
	.modal-dialog{
		width:700px;
	}
	</style>

</block>
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">商品管理</li>
</block>

<block name="breadcrumb-02">
	<h1 class="col-md-6">
		商品管理
		<small>
			<i class="icon-double-angle-right"></i>
			 商品列表
		</small>
	</h1>
	<div class="col-md-4">
			<div class="col-md-4 text-info">选择分类</div>
			<select name="cid" id="cat" class="form-control catSelect">
					<option value=""><font color="green">全部分类</font></option>
					<volist name="arr" id="firstCat">
						<option <notempty name="firstCat['child']">disabled</notempty> value="<{$firstCat['id']}>">
					       <php>echo $firstCat['html'].$firstCat['name']</php>
						</option>		
						<volist name="firstCat['child']" id="secCat">
							<option <notempty name="secCat['child']">disabled</notempty> value="<{$secCat['id']}>" >
							   <php>echo $secCat['html'].$secCat['name']</php>
							</option>

							<volist name="secCat['child']" id="thdCat">
							<option <notempty name="thdCat['child']">disabled</notempty> value="<{$thdCat['id']}>" >
							   <php>echo $thdCat['html'].$thdCat['name']</php>
							</option>
						</volist>
						</volist>	
					</volist>	
		</select>
	</div>
</block>
<block name="main">
	
		<table class="table table-striped table-bordered table-hover center spuTable">
			<thead>
				<tr align='left' bgcolor="#ccc">
					<th>编号</th>
					<th>商品名称</th>
					<th>价格</th>
					<th>库存</th>
					<th>状态</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<volist name="spuArr" id="spu" empty="暂时没有数据">
					<tr>
						<td><{$spu['spuid']}></td>
						<td><img src="__PUBLIC__<{$spu['imgurl']}>" width="50px" height="50px" alt=""><{$spu['name']}></td>
						<td><{$spu['price']}></td>
						<td><{$spu['totalstore']}></td>
						<td><?php echo $spu['status']==1?'上架中':'已下架'?></td>
						<td><{:date('Y-m-d',$spu['addtime'])}></td>
						<td>
							<button type="button" data-spuid="<{$spu['spuid']}>" class="btn btn-danger btn-xs delBtn">删除</button>
							<button type="button" class="btn btn-info btn-xs btn-look" data-spuid="<{$spu['spuid']}>">查看sku</button>
							<a href="<{:U('Goods/addsku',['spuid'=>$spu['spuid']])}>"><button type="button" class="btn btn-info btn-xs btn-addsku" data-spuid="<{$spu['spuid']}>">添加sku</button></a>
							<a href="javascript:void(0)"><button type="button" class="spueditBtn btn btn-success btn-xs" data-spuid="<{$spu['spuid']}>" data-spuname="<{$spu['name']}>">编辑</button></a>
						</td>
					</tr>
				</volist>
			</tbody>
			<tfoot>
				<tr><td colspan="7" id="pageTd"><{$page}></td></tr>
			</tfoot>
		</table>


	

	<!--查看具体商品的sku-->
		<div class="modal fade" id="skuLookBox">
			  <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"></button>
			        <h4 class="modal-title">查看sku产品</h4>
			      </div>
			      <div class="modal-body">

			      <!--sku表格-->
			        <table class="table table-striped table-bordered table-hover center skuTable">
						<thead>
							<tr align='left' bgcolor="#ccc">
								<th>编号</th>
								<th>商品名称</th>
								<th>属性</th>
								<th>价格</th>
								<th>库存</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<!--编辑spu产品的摸态框-->
		<div class="modal fade" id="spueditBox">
			  <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"></button>
			        <h4 class="modal-title">编辑spu</h4>
			      </div>
			      <div class="modal-body">
			      	<form class="form-horizontal" role="form">
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">编辑分类</label>
					    <div class="col-sm-10">
					     <select name="cid" class="form-control" id="spureselect" style="width:200px">
								<volist name="arr" id="firstCat">
						<option <notempty name="firstCat['child']">disabled</notempty> value="<{$firstCat['id']}>">
					       <php>echo $firstCat['html'].$firstCat['name']</php>
						</option>		
						<volist name="firstCat['child']" id="secCat">
							<option <notempty name="secCat['child']">disabled</notempty> value="<{$secCat['id']}>" >
							   <php>echo $secCat['html'].$secCat['name']</php>
							</option>

							<volist name="secCat['child']" id="thdCat">
							<option <notempty name="thdCat['child']">disabled</notempty> value="<{$thdCat['id']}>" >
							   <php>echo $thdCat['html'].$thdCat['name']</php>
							</option>
						</volist>
						</volist>	
					</volist>		
						</select>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-2 control-label">编辑品牌</label>
					    <div class="col-sm-10">
					         <select class="form-control focus state" id="spuBrandselect" style="width:200px" name="brand">
						       <volist name="brandArr" id="brand">
						       		  <option value="<{$brand['id']}>"><{$brand['brandname']}></option>
						       </volist>
		    				</select>	 
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-2 control-label">编辑商品名</label>
					    <div class="col-sm-10">
					         <input type="text" name="goodsname" value="">	 
					    </div>
					  </div>
					
			   
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary spu-saveBtn">保存更改</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
</block>



<block name="end">
	<script type="text/javascript">


		$('.catSelect').find('option:not(:disabled)').css({
			color:'blue'
		})
		$('#spureselect').find('option:not(:disabled)').css({
			color:'blue'
		})

		//ajax请求数据和分页函数
		function getViaAjax(param){
			$.ajax({
				url:"<{:U('Goods/index')}>",
				data:param,
				async:true,
				type:'get',
				dataType:'json',
				beforeSend:function(){
					
				},
				success:function(data){

					console.log(data);
					if($(data.page).find('a').length==0){
						$('.spuTable tfoot').hide();	
					}else{
						$('.spuTable tfoot').find('td').html(data.page).end().show();
					}
					
					$('.spuTable tbody').html(data.html);
				}
			})
		}

		//ajax分页函数

		//查看按钮
		$('.spuTable').delegate('.btn-look','click',function(){

			//向后台请求skuid数据
			$.ajax({
				url:"<{:U('Goods/look_sku')}>",
				data:{p:1,spuid:$(this).data('spuid')},
				async:false,
				type:'get',
				beforeSend:function(){

				},
				success:function(data){
					if(data.code==1){

						//失败
					}else{

						//成功
						$('.skuTable tbody').html(data.html);
					}
				}
			})

			$('#skuLookBox').modal({
				backdrop:'static'
			})

		//点击分页ajax刷新
		}).delegate('#pageTd a','click',function(event){
			event.preventDefault();
			 var page = 1;

			if($(this).hasClass('num')){
				page = $(this).html();
			}else if($(this).hasClass('next')){
				page = $(this).prev('.num').html();
			}else if($(this).hasClass('prev')){
				page = $(this).next('.num').html();
			}
			getViaAjax({p:page});


		//删除按钮
		}).delegate('.delBtn','click',function(){

			var spuId = $(this).data('spuid'),//spuId
				cid   = $('.catSelect').find(':selected').val();
			if(confirm('你确认要删除该商品？')){
					//ajax请求删除
				$.ajax({
					url:"<{:U('Goods/deleteSpuGoods')}>",
					data:{spuid:spuId},
					async:true,
					type:'get',
					dataType:'json',
					beforeSend:function(){
						
						//loading预留图片
					},
					success:function(data){
						alert('删除成功!');

						//在请求页面
						getViaAjax({cid:cid,spuid:spuId,p:1});
						if($(data.page).find('a').length==0){
							$('.spuTable tfoot').hide();	
						}else{
							$('.spuTable tfoot').find('td').html(data.page).end().show();
						}
						
						$('.spuTable tbody').html(data.html);
					}
				})
			}
			

		//编辑按钮
		}).delegate('.spueditBtn','click',function(){
			var title = '商品编号:<span id="modal-spu">'+$(this).data('spuid')+'</span>#<span id="spu-name">'+$(this).data('spuname')+'</span>';
			$('#spueditBox').find('.modal-title').html(title).end().find('input[name="goodsname"]').val($(this).data('spuname')).end().modal({'backdrop':'static'});
		})


		//点击保存按钮 保存spu的修改的信息
		$('.spu-saveBtn').click(function(){
			$(this).removeClass('disabled').addClass('disabled');
			var that = $(this);
			var brand = $('#spuBrandselect').find(':selected').val(),
				cat   = $('#spureselect').find(':selected').val(),
				spuid = $('#modal-spu').html(),
				goodsname = $('#spu-name').html();

			//向服务器请求保存数据
			$.ajax({
				url:'<{:U("Goods/saveSpu")}>',
				type:'get',
				data:{spuid:spuid,goodsname:$('#spueditBox').find('input[name="goodsname"]').val(),cat:cat,brand:brand},
				async:true,
				success:function(data){
					if(data.code==1){

						//失败
						alert('保存商品信息失败！请稍后再试');
						getViaAjax({p:1,cid:$('.catSelect').find(':selected').val()});
						$('#spueditBox').modal('hide');
						that.removeClass('disabled');
					}else{

						alert('保存成功！');
						that.removeClass('disabled');
						getViaAjax({p:1,cid:$('.catSelect').find(':selected').val()});
						$('#spueditBox').modal('hide');
					}
				}
			})
			
		})

		$('#cat').change(function(){
			var cid = $(this).find(':selected').val();
			getViaAjax({p:1,cid:cid});
		})
		/**
		 * sku信息操作分割线*****************************
		 */
		
		//删除按钮
		$('#skuLookBox').delegate('.skudelBtn','click',function(){
			var cat   = $('#spureselect').find(':selected').val();
			if(confirm('你确认要删除该sku商品？')){
					$.ajax({
					url:'<{:U("Goods/deleteSku")}>',
					type:'get',
					data:{skuid:$(this).data('skuid')},
					async:true,
					success:function(data){
						if(data.code==1){

							//失败
							alert('删除失败！请稍后再试');
							getViaAjax({p:1,cid:$('.catSelect').find(':selected').val()});
							$('#skuLookBox').modal('hide');
						}else{

							alert('删除成功！');
							getViaAjax({p:1,cid:$('.catSelect').find(':selected').val()});
							$('#skuLookBox').modal('hide');
						}
					}
				})
			}	
			
		})
		// $('.skuTable')
	</script>
</block>